<template>
    <div class="submit">
		<div class="submit-content">
            <div class="submit-info">
                <div class="submit-info-item">
                    <div class="submit-info-title">模板名称: </div>
                    <div class="submit-info-content"  @mousedown.stop>
                        <el-input v-model="templateData.TemplateName" maxlength="20" placeholder="不得超过20个字符"></el-input>
                    </div>
                </div>
                <div class="submit-info-item" v-for="(item,i) in templateData.filters" :key="i">
                    <div class="submit-info-title">{{item.Name}}: </div>
                    <div class="submit-info-content" @mousedown.stop>
                        <el-select 
                            v-model="FilterVaules[i]"
                            :multiple-limit="3"
                            multiple placeholder="至多选三个">
                            <el-option v-for="filter in item.FilterValues" :key="filter.ValueId" :label="filter.Name" :value="filter.ValueId">
                                <img v-if="filter.DisplayMode == 1" :src="$store.state.port.ossPath + filter.ImageUrl" alt="">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="submit-info-item">
                    <div class="submit-info-title">关键词标签: </div>
                    <div class="submit-info-content keyword"  @mousedown.stop>
                        <div style="text-align:left;line-height: 24px;">
                            <span class="keyword-list" v-for="(item,i) in templateData.Keywords" :key="i">{{item}}<i class="el-icon-circle-close" @click="handleDelKeyword(i)"></i></span>
                        </div>
                        <input ref="keyInput" placeholder="关键词之间用“enter”隔开,最少五个" @keydown.enter="setKeyword" @blur="setKeyword">
                    </div>
                </div>
                <div class="submit-info-item">
                    <div class="submit-info-title">模板介绍: </div>
                    <div class="submit-info-content" @mousedown.stop>
                        <el-input type="textarea" :rows="5" maxlength="150" v-model="templateData.Content" placeholder="请简要概述"></el-input>
                    </div>
                </div>
            </div>
            <div class="temp-cover" v-if="needFace">
                <span class="temp-cover-title">模板封面 : </span> 
                <div style="height: 10px;"></div>
                <el-upload
                    v-show="false"
                    ref="upload"
                    accept="image/*"
                    :action="$store.state.port.netServer + '/UploadToOSS'"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
                    :onError="uploadError"
                    :headers="myHeader"
                    :file-list="fileList">
                    <img class="el-icon-plus" src="/img/personal/qyadd_icon.png" alt="">
                </el-upload>
                <el-image style="width:100%;" :src="$store.state.port.ossPath + templateData.FacePicture" alt="" @click="isBig = !isBig" title="点击预览"></el-image>
                <el-progress v-show="uploadProgress.show" :percentage="uploadProgress.percentage"></el-progress>
                <el-button size="mini" @click="handleClickUpload">手动上传</el-button>
                <el-button size="mini" @click="handleAuto">自动生成</el-button>
                <el-dialog :visible.sync="dialogVisible" append-to-body top="10vh">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            <div v-else style="text-align:center;line-height:20;">此产品不需要上传封面</div>
		</div>
        <transition name="el-zoom-in-center">
            <div v-if="isBig" class="big-image" @click="isBig = false" title="点击收起">
                <img :src="$store.state.port.ossPath + templateData.FacePicture + '?v=' + new Date().getTime()" alt="">
            </div>
        </transition>
        <div class="submit-btn">
            <div class="btn" @click="submitForm">提交审核</div>
            <div class="btn" @click="closeDialog">继续编辑</div>
        </div>
        <transition name="animation-scale">
            <div class="model-dialog" v-show="autoProductionFace.loading">
                <div class="model-mask-active"></div>
                <div class="model-content">
                    <div class="admin-model-content" style="height: 800px;overflow:scroll"
                        v-loading="autoProductionFace.draw"
                    >
                        <canvas width="500" height="500" ref="autoProductionCanvas"></canvas>
                    </div>
                    <div class="model-btns">
                        <div><el-button @click="handleCancel">取消</el-button></div>
                        <div style="height: 15px;"></div>
                        <div><el-button type="primary" @click="handleok">确定</el-button></div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { img2base64 } from '@/assets/js/utils.js'
export default {
    data () {
        return {
            templateInfo: null, // 模板信息
            templateData: {
				FilterVaules: null,//属性实际ID,逗号隔开
				StrThematic: '',//所属专题
				Keywords: [],//关键词
				Content: null,//内容
				TemplateName: null,//模板名称 
				FacePicture: null,//封面
				TemplateNumber: null, //模板编号
                filters: [],
            },  // 模板数据
            typeId: '',
            FilterVaules: [], // 分类选择
            dialogImageUrl: '',
            dialogVisible: false,
            filters: [],
            subjectList: [],
            show: false,
            isSubmit: true, // 是否提交过
            needFace: true,  // 是否需要封面
            isBig: false,
            fileList: [],
            autoProductionFace: { // 自动生成封面参数
                loading: false,
                msg: '自动生成',
                draw: true,
                list: [78],
                show: false
            },
            uploadProgress: { // 上传封面进度
                show: false,
                percentage: 0,
                timer: null
            }
        }
    },
    props: ['tempInfo','TemplateNumber', 'ProductTypeId', 'faceImg', 'sizeId'],
    methods: {
		closeDialog() { // 向上传递关闭
			this.$emit('toggleDialog', false)
		},
        // 输入关键词
        setKeyword() {
						let keyword = this.$refs.keyInput.value
						if (keyword) {
							let arr = keyword.split(' ')
							arr.forEach(key => {
								key && this.templateData.Keywords.push(key)
							})  
						}
            this.$refs.keyInput.value = ''
        },
        handleDelKeyword(i) {  // 删除关键词
            this.templateData.Keywords.splice(i,1)
        },

        // 所属行业列表
        getIndustryList() {
            var url = '/ProductTypeFilter?productTypeID=' + this.ProductTypeId
            this.$axios.get(url).then(res => {
                if(res === undefined) return console.log('没有数据')
                console.log(res.data)
                this.needFace = res.data.NeedFacePic
                this.filters = res.data.FilterList
                this.templateData.filters = res.data.FilterList
                this.templateData.FacePicture = this.faceImg
                this.templateData.TemplateNumber = this.TemplateNumber
                
                this.getTemplateInfo()
            })
        },

        /**
         * 获取模板
         */
        getPagesInfo() {
            // console.log(localStorage.getItem('teamNum'))
            var TeamNum = localStorage.getItem('teamNum') // 团队编号
            var TemplateNumber = this.TemplateNumber // 模板编号
            if (!TeamNum || !TemplateNumber) {
                this.$message.closeAll()
                this.$message({
                    type: 'warning',
                    message: `查询参数有误: {TeamNum: ${TeamNum}, TemplateNumber: ${TemplateNumber}`,
                    center: true
                })
                return
            }
           this.$axios.post('/Template',`TeamNum=${TeamNum}&TemplateNumber=${TemplateNumber}`)
                .then(({data}) => {
                    this.templateInfo = data
                })
                .catch(err => {
                    console.log(`查询模板失败,错误信息: ${err}`)
                })
        },

        // 获取模板提交信息
        getTemplateInfo() {
            this.$axios.get('/DesignerSubmitTemplate?TemplateNumber=' + this.TemplateNumber)
            .then(res => {
                // console.log(res.data, '模板信息')
                if(res.data == null) return this.$refs.upload.clearFiles()
                this.templateData.TemplateName = res.data.TemplateName
                this.templateData.TemplateNumber = res.data.TemplateNum
                this.templateData.FacePicture = res.data.FacePicture
                this.templateData.StrThematic = res.data.StrThematic
                this.templateData.Content = res.data.Contents
                this.templateData.Keywords = res.data.Keywords.split(',')
                this.templateData.filters = this.parsing(res.data)
                this.templateData.FilterVaules = this.reparsing(this.templateData.filters)
                this.fileList[0] = {url:  this.$store.state.port.ossPath + res.data.FacePicture}
            }).catch(() => {
                this.templateData.TemplateName = ''
                this.templateData.TemplateNumber = this.TemplateNumber
                this.templateData.FacePicture = this.faceImg
                this.fileList[0]= {url: ''}
                this.templateData.StrThematic = ''
                this.templateData.Content = ''
                this.templateData.Keywords = []
                this.templateData.filters = this.filters
                // console.log(this.templateData)
            })
        },


        // 收入专题列表
        getSubjectList() {
            var url = "/ThematicColumn?Visiable=" + 1 +"&IsHot="+ 1
            this.$axios.get(url).then(res => {
                //console.log(res.data)
                this.subjectList = res.data
            })
        },

        /**
         * 进度条控制
         * @param { boolean } show 显示条件
         */
        controlProgress(show) {
            if (show) {
                this.uploadProgress.show = true
                this.uploadProgress.timer = setInterval(() => {
                    if (this.uploadProgress.percentage < 90) this.uploadProgress.percentage++
                }, 100)
            } else {
                this.uploadProgress.percentage = 100;
                setTimeout(() => {
                    clearInterval(this.uploadProgress.timer)
                    // this.uploadProgress = {
                    //     show: false,
                    //     percentage: 0,
                    //     timer: null
                    // }
                })
            }
            
        },

        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file, 'sdfsd');
            if(file.response) {
                this.dialogImageUrl = file.response.url
            }else{
                this.dialogImageUrl = file.url
            }
            this.dialogVisible = true;

            this.controlProgress(true)
        },
        uploadSuccess (response, file, fileList) {
            // console.log('上传文件', response)
            this.templateData.FacePicture = response.key
            this.controlProgress(false)
        },
        uploadError (response, file, fileList) {
            // console.log('上传失败，请重试！',response)
        },

        handleprompt(message, type) { // 提示
			this.$message.closeAll();
			this.$message({message, type, customClass: 'info'});
		},
        submitForm() {
            if (!this.isSubmit) return this.handleprompt("正在处理,请稍后再试", 'warning');
            if (!this.templateData.TemplateName) return this.handleprompt('没有模板名称', 'warning');
            if (this.filters.length && this.FilterVaules.join(',') == '') return this.handleprompt('没有选择分类信息', 'warning');
            if (!this.templateData.FacePicture) return this.handleprompt('没有上传封面', 'warning');
            if (this.templateData.Keywords.length <= 4) return this.handleprompt('关键词最少五个', 'warning');
            let arr = ['TemplateNumber', 'FacePicture', 'Content', 'TemplateName', 'Keywords', 'StrThematic'],
                formData = new FormData();
            formData.append('FilterVaules', this.FilterVaules.join(','));
            formData.append('Filters', '')
            for(let key in arr) {
				if (key == 'Keywords') {
					formData.append(arr[key], this.templateData[arr[key]].join(','))
				} else {
					formData.append(arr[key], this.templateData[arr[key]])
				}
            }
            let config = {
                headers:{'Content-Type': 'multipart/form-data'}
            }
            this.isSubmit = false;
            // let subject;
            // if(this.subject.length > 0) {
            //     subject = this.subject.join(',')
            // }else{
            //     subject = ''
            // }
			console.log(this.templateData,this.FilterVaules)
			this.$axios.post('/DesignerSubmitTemplate', formData, config)
            .then(res => {
                console.log(res.data)
                if(res.data == 'Success'){
                    this.isSubmit = true
                    this.handleprompt('提交成功,等待审核', 'success')
                    // this.$store.commit('setDialogSubmit', false)
                    this.$emit('getRecord')
                    this.$emit('toggleDialog', false)
                }
            }).catch(err => {
                this.isSubmit = true
                this.handleprompt('服务器出错, 请稍后再试')
            })
        },

        parsing(data) {
            let arr = [], filterVlaue = data.FilterValues;
            this.filters.forEach(item => {
                item.FilterValues.forEach((filter, j) => {
                    if (filterVlaue.indexOf(filter.ValueId) > -1) {
                        filter.isSelected = true
                    } else {
                        filter.isSelected = false
                    }
                })
                arr.push(item)
            })
            return arr
        },
        reparsing(data) {
            let arr = [];
            this.FilterVaules = []
            data.forEach((item, i) => {
				this.FilterVaules.push([])
				item.FilterValues.forEach(filter => {
					if (filter.isSelected) {
						arr.push(filter.ValueId)
						this.FilterVaules[i].push(filter.ValueId)
					}
                })
            })
			return arr
        },

        /**
         *  手动点击上传按钮 
         */
        handleClickUpload() {
            // console.log(this.$refs.upload)
            this.$refs.upload.$el.firstChild.click()
        },
        
        autoUploadCover: function(canvas) { // 自动上传封面
            if(canvas.msToBlob){  //兼容IE
                canvas.msToBlob();
            } else {  //非IE内核
                canvas.toBlob(data=> { // canvas to blob
                    console.log(data)
                    var formData = new FormData();
                    formData.append('file', data, new Date().getTime() + '.png')
                    this.$axios.post( this.$store.state.port.netServer + '/UploadToOSS', formData)
                    .then(({data}) => {
                        if (data.status == 'ok') {
                            this.templateData.FacePicture = data.key
                            this.$message.closeAll();
                            this.$message({
                                type: 'success',
                                message: '自动生成成功',
                                center: true
                            })
                            this.autoProductionFace.loading = false
                            setTimeout(() => this.autoProductionFace.draw = true, 100)
                        }
                    })
                    .catch(err => {
                        alert('自动生成图片失败,请手动上传!')
                        this.autoProductionFace.loading = false
                        setTimeout(() => this.autoProductionFace.draw = true, 100)
                    })
                })
            }
        },
        drawPictures: function (src) {// 绘制图片
            console.log(src, '这是需要绘制的图片地址')
            return new Promise(resolve => {
                let img = new Image();
                img.crossOrigin = 'anonymous';
                img.onload = () => {
                    resolve(img);
                }
                img.src = src + '?v=' + new Date().getTime();
            })
        },
        handleAuto() { // 自动生成
            /* [78:会员卡, 47:食品酒水单, 25:宣传单, 26:印刷海报, 27:三折页, 28:易拉宝, 29:X展架 ,  
                32: 代金券, 35: 停车卡, 36:入场券, 38:广告扇, 40:挂画, 41:笔记本, 70: 信纸, 71:信封, 
                72:便签, 73:授权书]

                [78, 47, 25, 26, 27, 28, 29, 30, 32, 35, 36, 38, 40, 41, 70, 71, 72, 73]
            */
            console.log(this.templateInfo)
            let list = [78, 47, 25, 26, 27, 28, 29, 30, 32, 35, 36, 38, 40, 41, 70, 71, 72, 73];
            if(list.indexOf(this.ProductTypeId) == -1) {
                console.log(this.ProductTypeId)
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '此产品不支持自动生成',
                    center: true
                })
                return 
            }
            this.autoProductionFace.loading = true;
            let canvas = this.$refs.autoProductionCanvas;
            let ctx = canvas.getContext("2d");
 
            if (this.ProductTypeId == 78) {//[78:会员卡,]
                
                this.drawPictures('/yangji/pvc.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 98, 760, 490);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 639, 760, 490);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            } 
            if (this.ProductTypeId == 47 || this.ProductTypeId == 25) { // [47:食品酒水单, 25:宣传单]
                this.drawPictures('/yangji/shiping.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let arr = JSON.parse(JSON.stringify(this.templateInfo.TemplatePages))
                    arr.reverse();
                    Promise.all(Array.from(arr).map((item, index) => {
                        return new Promise(resolve => {
                            var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                resolve(img)
                            })
                        })
                    })).then(arr => {
                        arr.forEach((img, i) => {
                            if (i == 0 ) {
                                ctx.drawImage(img, 276, 120, 604, 814);
                            }
                            if (i == 1) {
                                ctx.drawImage(img, 120, 169, 604, 814);
                            }
                        }) 
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if(this.ProductTypeId == 26) { // 印刷海报
                this.drawPictures('/yangji/haibao.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                resolve(img)
                            })
                        })
                    })).then(arr => {
                        ctx.drawImage(arr[0], 120, 120, 760, 1029);
                        this.drawPictures('/yangji/haibaojiazi.png').then(img => {
                            ctx.drawImage(img, 202, 0, 595, 137);
                        }) 
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.ProductTypeId == 27) { // 三折页
                if(this.templateInfo.Size.ID == 59) {
                    this.drawPictures('/yangji/A4sanzhe.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 120, 120, 760, 564);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }

            }
            if (this.ProductTypeId == 28) { //易拉宝
                this.drawPictures('/yangji/yilabao.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 135, 142, 733, 1834);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.ProductTypeId == 29) { // x展架
            
                if (this.sizeId == 63) {
                    this.drawPictures('/yangji/Xzhanjiasmall.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 188, 165, 622, 1653);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else if(this.sizeId == 62) {
                    this.drawPictures('/yangji/Xzhanjiadahao.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 105, 121, 779, 1742);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
            }
            if (this.ProductTypeId == 30) { // 门型展架
                this.drawPictures('/yangji/menxingzhanjia.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 191, 172, 621, 1394);
                        this.drawPictures('/yangji/menxingzhanjiakuang.png').then(img => {
                            ctx.drawImage(img, 33, 120, 941, 1588);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.ProductTypeId == 32) { // 代金券
                this.drawPictures('/yangji/daijinjuan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                             var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 132, 760, 245);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 462, 760, 245);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.ProductTypeId == 35) { // 停车卡
                this.drawPictures('/yangji/tingcheka.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 128, 120, 745, 259);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 128, 423, 745, 259);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.ProductTypeId == 36) { // 入场券
                this.drawPictures('/yangji/ruchaungjuan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            var src = item.Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 120, 760, 317);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 497, 760, 317);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.ProductTypeId == 38) { // 广告扇
                this.drawPictures('/yangji/guanggaoshan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 120, 120, 762, 1245);
                        this.drawPictures('/yangji/guanggaoshan.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.ProductTypeId == 40) { // 挂画
                this.drawPictures('/yangji/guahua.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                     var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 140, 140, 721, 1021);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.ProductTypeId == 41) { // 笔记本
                this.drawPictures('/yangji/bijibenbg.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            var src = this.templateInfo.TemplatePages[0].Thumb;
                            if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                            this.drawPictures(src).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 500, 120, 380, 575);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 120, 380, 575);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.drawPictures('/yangji/bijiben.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.ProductTypeId == 70) { // 信纸
                this.drawPictures('/yangji/xingzhi.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 120, 120, 709, 943);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.ProductTypeId == 71) { // 信封
                if(this.templateInfo.SizeId == 10) {
                    canvas.width = 1000
                    canvas.height = 778
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 87, -59, 826, 1166);
                        this.drawPictures('/yangji/7haoxingfeng.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
            }
            if (this.ProductTypeId == 72) { // 便签
                this.drawPictures('/yangji/bianqian.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        if(this.templateInfo.SizeId == 88) { // A5
                            ctx.drawImage(img, 224, 179, 553, 826);
                        } else if(this.templateInfo.SizeId == 12) { // A4
                            ctx.drawImage(img, 131, 120, 695, 943);
                        }
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.ProductTypeId == 73) { // 授权书
                if(this.templateInfo.SizeId == 14) {
                    this.drawPictures('/yangji/shouquanshushuban.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 231, 120, 538, 760);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else if(this.templateInfo.SizeId == 15) {
                    this.drawPictures('/yangji/shouquanshuhengban.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1 && src.indexOf('img.') == -1 ) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 120, 232, 760, 537);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
                
            }
            
        },
        handleCancel () { // 取消
            this.autoProductionFace.loading = false;
            this.autoProductionFace.draw = true
        },
        handleok() { // 确定
            let canvas = this.$refs.autoProductionCanvas;
            this.autoUploadCover(canvas)
            this.autoProductionFace.show = true;
        },
        handleOut() { // 不符合要求
            this.$message.closeAll();
            this.$message({
                type: 'warning',
                message: '当前产品的尺寸不符合自动生成的要求!',
                center: true
            })
            this.autoProductionFace.loading = false;
        },
    },
    mounted() {
        // console.log(this.faceImg, 123, this.ProductTypeId, this.sizeId)
        if (document.getElementById('coverStyle')) {
            document.body.removeChild(document.getElementById('coverStyle'))
        }
        this.getIndustryList()
        this.getSubjectList()
        this.getPagesInfo() // 获取模板页面信息
    },
    computed: {
        myHeader() {
            return {
                "token":window.localStorage.getItem('token')
            }
        }
    },
}
</script>

<style lang="less" scoped>
.submit{
    .submit-content{
        display: flex;
        .submit-info{
            flex: 1;
            .submit-info-item{
                display: flex;
                align-items: center;
                // width: 430px;
                padding: 10px;
                .submit-info-title{
                    width: 100px;
                    font-size: 16px;
                    text-align: right;
                    margin-right: 20px;
                }
                .submit-info-content{
                    width: 416px;
                }
            }
        }
        .temp-cover{
            flex: 1;
            text-align: center;
            padding: 10px;
            padding-left: 20px;
            width: 221px;
            position: relative;
            .temp-cover-title{
                font-size:16px;
                color:rgba(51,51,51,1);
            }
        }
    }
    .big-image{
        position: fixed;
        z-index: 3333;
        padding: 20px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.3);
        overflow: auto;
        img {
            display: block;
            margin:70px auto 0;
            max-width: 100%;
        }
    }
}
.submit /deep/ .el-select{
    width: 100%;
    height: 40px;
    .el-input, .el-input__inner{
        height: 40px !important;
        line-height: 40px;
    }
    .el-input__suffix-inner i::before{
        content: '',
    }
    .el-input__suffix-inner i::after{
        display: inline-block;
        background-image: url(/img/personal/drop_down.png);
        width: 100%;
        height: 30px; 
    }
    .el-input__suffix-inner .el-select__caret{
        transform: rotateZ(0);
    }
    .el-select__tags .el-tag{
        background:rgba(229,229,229,1);
        color: rgba(51,51,51,1);
    }
}

.submit /deep/ .el-upload{
    width: 221px;
    min-height: 320px;
    background:rgba(236,236,236,1);
    border-radius:5px;
    border: 1px solid rgba(236,236,236,1);
    position: relative;
    .el-icon-plus{
        display: inline-block;
        margin-top: 126px;
    }
}
.submit /deep/ .temp-cover .el-upload-list--picture-card .el-upload-list__item{
    width: 231px;
    height: 100%;
    position: absolute;
    top: 29px;
    left: 21px;
    z-index: 1000;
    img{
        // object-fit: contain;
        width: 100%;
    }
}

.submit-btn{
	width: 100%;
    padding-top: 50px;
    padding-bottom: 0;
    text-align: center;
    .btn{
        display: inline-block;
        width: 179px;
        border-radius: 5px;
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
    }
    .btn:first-child{
        background: @color;
        color: rgba(255,255,255,1);
        margin-right: 73px;
    }
    .btn:last-child{
        border:1px solid rgba(210,210,210,1);
        color:rgba(153,153,153,1);
    }
}

.keyword{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgba(210,210,210,1);
    border-radius: 4px;
    padding: 5px;
    .keyword-list{
        display: inline-block;
        padding: 0 5px;
        // height: 24px;
        // line-height: 24px;
        margin: 5px 5px 5px 0;
        font-size: 14px;
        background-color: #f0f2f5;
        color: #909399;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        .el-icon-circle-close{
            display: inline-block;
            margin-left: 5px;
            cursor: pointer;
        }
    }
    input{
        width: 220px;
        height: 26px;
        border: 1px solid #dcdfe6;
		border-radius: 4px;
        margin: 5px 5px 5px 0;
    }
}
.auto-generate-cover {
    canvas {
        border-radius: 5px;
    }
    img {
        width: 100%;
        box-shadow: 0 0 16px 5px rgba(0, 0, 0, .12);
    }
}


/*滚动条样式*/
.model-content .admin-model-content {
    &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 0;
    }
    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        background: rgba(0,0,0,0.3);
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0;
        background: #fff;
    }
    
}
.model-btns {
    position: absolute;
    top: 0;
    right: -80px;
}
</style>
